<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/download.css">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <title>
        小米商城客户端下载
    </title>
</head>

<body>
    <!-- 顶部栏 -->
    <div class="topBar">
        <div class="container">
            <!-- 顶部栏由三块组成，列表，购物车以及登录 -->
            <!-- 顶部栏的列表区 -->
            <div class="topBar-list">
                <!-- 每个列表可以分为两部分，一个a标签代表链接以及span标签“|”分隔开 -->
                <a href="./index.html">小米官网</a>
                <span>|</span>
                <a href="#">小米商城</a>
                <span>|</span>
                <a href="#">小米澎湃OS</a>
                <span>|</span>
                <a href="#">loT</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#">天星数科</a>
                <span>|</span>
                <a href="#">有品</a>
                <span>|</span>
                <a href="#">小爱开放平台</a>
                <span>|</span>
                <a href="#">资质证照</a>
                <span>|</span>
                <a href="#">协议规则</a>
                <span>|</span>
                <a href="#" class="a_download">下载app
                    <div class="download">
                        <img src="./img/download.png" alt="">
                        <p>小米商城app</p>
                    </div>
                    <div class="stri"></div>
                </a>
                <span>|</span>
                <a href="#">Select Location</a>
                <span>|</span>
            </div>
            <!-- 顶部栏的购物车区 -->
            <div class="shop">
                <a href="#">
                    <i class="iconfont">&#xe690;</i>
                    <i>购物车（0）</i>
                </a>
                <div class="cart-list">
                    购物车中还没有商品,赶紧选购吧!
                </div>
            </div>
            <!-- 顶部栏的登录区 -->
            <div class="login">
                <a href="#">登录</a>
                <span>|</span>
                <a href="#">注册</a>
                <span>|</span>
                <a href="#">消息通知</a>
                <span>|</span>
            </div>
        </div>
    </div>
    <!-- 主体区域 -->
    <div class="main">
        <div class="wrapper">
            <!-- logo -->
            <div class="logo"></div>
            <!-- 文字 -->
            <div class="text">
                <p>小米商城</p>
                <p>享受科技带来的美好生活</p>
            </div>
            <!-- 安卓下载 -->
            <div class="andriod">
                &nbsp;&nbsp;&nbsp;&nbsp;Andriod下载
            </div>
            <!-- app store下载 -->
            <div class="app">
                &nbsp;&nbsp;&nbsp;&nbsp;APP Store下载
            </div>
            <!-- 下载二维码 -->
            <img src="./img/download.png" class="code"></img>
        </div>
    </div>
    <!-- 主体区域结束 -->
    <!-- 脚部 -->
    <div class="footer">
        <div class="container">
            <!-- 脚部一共分为两部分，上部分的服务以及其他小字 -->
            <div class="footer-service">
            </div>
            <div class="footer-links clearfix">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd>账户管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl class="col-links">
                    <dt>服务支持</dt>
                    <dd>售后政策</dd>
                    <dd>自助服务</dd>
                    <dd>相关下载</dd>
                </dl>
                <dl class="col-links">
                    <dt>线下门店</dt>
                    <dd>小米之家</dd>
                    <dd>服务网点</dd>
                    <dd>授权体验店</dd>
                </dl>
                <dl class="col-links">
                    <dt>关于小米</dt>
                    <dd>了解小米</dd>
                    <dd>加入小米</dd>
                    <dd>投资者关系</dd>
                </dl>
                <dl class="col-links">
                    <dt>关注我们</dt>
                    <dd>新浪微博</dd>
                    <dd>官方微信</dd>
                    <dd>联系我们</dd>
                </dl>
                <dl class="col-links">
                    <dt>特色服务</dt>
                    <dd>F码通道</dd>
                    <dd>礼物码</dd>
                    <dd>防伪查询</dd>
                </dl>
                <div class="col-contact">
                    <p class="phone">400-100-5678</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <a href="#">
                        <i class="iconfont">&#xe641;</i>
                        人工客服
                    </a>
                </div>
            </div>

        </div>
    </div>
</body>

</html>